<!-- xiaomu封装的组件：表格 -->
<template>
  <!-- 表格顶部操作栏： -->
  <div style="margin-bottom: 16px;" v-if="$slots.toolbar">
    <slot name="toolbar"></slot>
  </div>

  <!-- 表格： -->
  <el-table :data="tableData"
    :header-cell-style="{ backgroundColor: '#F9F9F9', fontWeight: 'normal', color: '#333', lineHeight: '40px' }"
    highlight-current-row>
    <template v-for="column in columnData" :key="column.prop">
      <el-table-column :prop="column.prop" :label="column.label" :width="column['width']" :fixed="column.fixed"
        :align="column.align || 'left'" v-bind="column.settings">
        <template #default="{ row }" v-if="$slots[column.prop]">
          <slot :name="column.prop" :row="row"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>

  <!-- 分页： -->
  <div v-if="pageData" class="page-box">
    <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
      :page-sizes="[1, 3, 5, 10, 20]" background layout="total, sizes, prev, pager, next, jumper" :total="total" />
  </div>
</template>

<script setup lang="ts">

// 拿到父组件传来的值
defineProps<{
  // 表格数据
  tableData: any[],
  // 列数据
  columnData: columnDataType[],
  // 分页总条数
  total?: number
}>();

// 分页组件的 v-model 数据
const pageData = defineModel<pageDataType>('pageData');

</script>

<style scoped>
/* 修改表格斑马纹颜色 */
::v-deep(.el-table__body tr:nth-child(even)>td) {
  background-color: #F2F7FB;
}

.page-box {
  margin: 20px 0 0;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>